<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI Tooltips Example</title>
    <script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="../../build/animation/animation-min.js"></script>
    <script type="text/javascript" src="../../build/drapdrop/dragdrop-min.js"></script>
    <script type="text/javascript" src="../../build/connection/connection-min.js"></script>
    <script type="text/javascript" src="../../build/container/container-min.js"></script>
    <script type="text/javascript" src="../../build/menu/menu-min.js"></script>

    <link rel="stylesheet" type="text/css" href="../../build/assets/skins/sam/container.css">
    <link rel="stylesheet" type="text/css" href="../../build/assets/skins/sam/menu.css">
    <link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
    <link rel="stylesheet" type="text/css" href="tooltips.css">
  </head>
  <body class="yui-skin-sam">
    <div id="doc" class="yui-t1">
      <div id="hd">
        <h1>DigitalDesigns</h1>
      </div>
      <div id="bd">
        <div class="yui-b">
          <div id="navmenu" class="yuimenu">
            <div class="bd">
              <ul class="first-of-type">
                <li class="yuimenuitem first-of-type"><a class="yuimenuitemlabel" href="aboutme.html">About Me</a></li>
                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="images.html">Images</a>
                  <div id="images" class="yuimenu">
                    <div class="bd">
                      <ul>
                        <li class="yuimenuitem"><a class="yuimenuitemlabel" href="photography.html">Photography</a></li>
                        <li class="yuimenuitem"><a class="yuimenuitemlabel" href="fantasy.html">Fantasy Art</a></li>
                        <li class="yuimenuitem"><a class="yuimenuitemlabel" href="Corporate.html">Corporate Logos</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="blog.html">My Blog</a></li>
                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="contact.html">Contact Me</a></li>
                <li class="yuimenuitem"><a class="yuimenuitemlabel" href="imagelinks.html">Image Resources</a>
                  <div id="links" class="yuimenu">
                    <div class="bd">
                      <ul>
                        <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr</a></li>
                        <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.b3ta.com">B3ta</a></li>
                        <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yotophoto.com">Yoto Photo</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
	      <div id="yui-main">
	        <div class="yui-b">
            <p class="content-head">Fantasy Art Images</p>
            <div class="images">
              <img id="img1" class="thumb" src="images/image1_thumb.jpg" title="tt" alt="thumb1">
              <img id="img2" class="thumb" src="images/image2_thumb.jpg" title="tt" alt="thumb2">
            </div>
            <div id="panel1" class="panel">
              <div class="hd">Image 1</div>
              <div class="bd"><img src="images/image1_full.jpg" alt="fullsize1"></div>
              <div class="ft">Copyright &copy; The Extremist 2008</div>
            </div>
            <div id="panel2" class="panel">
              <div class="hd">Image 2</div>
              <div class="bd"><img src="images/image2_full.jpg" alt="fullsize2"></div>
              <div class="ft">Copyright &copy; The Extremist 2008</div>
            </div>
            <div id="dialog">
              <div class="hd">Please Rate This Image</div>
              <div class="bd">
                <form method="POST" action="ratings.php">
                  <div><input type="hidden" name="image"></div>
                  <div class="radioContainer"><input type="radio" name="rating" value="Great"><span class="opt">Great</span></div>
                  <div class="radioContainer"><input type="radio" name="rating" value="Pretty Good"><span class="opt">Pretty Good</span></div>
                  <div class="radioContainer"><input type="radio" name="rating" value="Average"><span class="opt">Average</span></div>
                  <div class="radioContainer"><input type="radio" name="rating" value="Poor"><span class="opt">Poor</span></div>
                  <div class="radioContainer"><input type="radio" name="rating" value="Very Poor"><span class="opt">Very Poor</span></div>
                  <p><span class="rating">Rating:</span></p>
                </form>
              </div>
              <div class="ft"></div>
            </div>
          </div>
	      </div>
      </div>
      <div id="ft">
        <p class="ftext">Copyright&copy; Mr Freelance 2008</p>
      </div>
    </div>
    <script type="text/javascript">
      //set up the namespace object for this example
      YAHOO.namespace("yuibook.menu");
      
      //define the initPage function
      YAHOO.yuibook.menu.initPage = function() {
      
      var target;
      var images;
      
        //define the initMenu function
        YAHOO.yuibook.menu.initMenu = function() {
          var menu = new YAHOO.widget.Menu("navmenu", { position:"static" });
          menu.render();
        }
      
        //call the initMenu function when the DOM is ready
        YAHOO.util.Event.onDOMReady(YAHOO.yuibook.menu.initMenu);

        //define the addContext function
        YAHOO.yuibook.menu.addContext = function() {
      
          //obtain thumbnails from the page
          images = YAHOO.util.Dom.getElementsByClassName("thumb");
        
          //use the context constructor to create a context menu
          var context = new YAHOO.widget.ContextMenu("imagecontext", { trigger:images });

          //define the context menuitems
          context.addItem("View full-size");
          context.addItem("Buy this image");
          context.addItem("Image information");
          context.addItem("Rate this image");
        
          //render the context menu (it will remain hidden until the trigger is clicked)
          context.render(document.body);

          //obtain id of element context event was a target of
          YAHOO.yuibook.menu.getTarget = function() {
            target = this.contextEventTarget.id;
          }
          
          //execute the getTarget function when the context menu is shown
          context.showEvent.subscribe(YAHOO.yuibook.menu.getTarget);
        }
      
        //call the addContext function when the DOM is ready
        YAHOO.util.Event.onDOMReady(YAHOO.yuibook.menu.addContext);
      
        //define the initPanels function
        YAHOO.yuibook.menu.initPanel = function() {
      
          //define the panels
          var panel1 = new YAHOO.widget.Panel("panel1", {
            close:true,
            visible:false,
            modal:true,
            width:"457px",
            fixedcenter:true
          });
          var panel2 = new YAHOO.widget.Panel("panel2", {
            close:true,
            visible:false,
            modal:true,
            width:"457px",
            fixedcenter:true
          });
        
          //render the panels but don't show them yet
          panel1.render();
          panel2.render();
          
          //define viewfull function
          YAHOO.yuibook.menu.viewFull = function() {
            if (target == "img1"){
              YAHOO.util.Dom.setStyle("panel1", "display", "block");
              panel1.show();
            } else {
              YAHOO.util.Dom.setStyle("panel2", "display", "block");
              panel2.show();
            }
          }

          //attach listener for a click on the show full context menuitem
          YAHOO.util.Event.addListener("yui-gen11", "click", YAHOO.yuibook.menu.viewFull);
        }
        
        //render the panels when the DOM is complete
        YAHOO.util.Event.onDOMReady(YAHOO.yuibook.menu.initPanel);
        
        //define the initDialog function
        YAHOO.yuibook.menu.initDialog = function() {

          //define the dialog button handlers
          var handleRate = function() {
            dialog.submit();
          }
          var handleCancel = function() {
            dialog.cancel();
          }

          //define the dialog control
          var dialog = new YAHOO.widget.Dialog("dialog", {
            width:"500px",
            fixedcenter:true,
            visible:false,
            modal:true,
            constraintoviewport:true,
            postmethod:"async",
            buttons: [
              {text:"Rate!", handler:handleRate},
              {text:"Cancel", handler:handleCancel}
            ],
            effect: {effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.5}
          });

          //render the dialog but don't show it
          dialog.render();

          //define the success and failure response handlers
          var onSuccess = function(o) {
            alert(o.responseText);
          }
          var onFailure = function(o) {
            alert("Failure! " + o.status);
          }
          
          //execute whichever handler is appropriate
          dialog.callback.success = onSuccess;
          dialog.callback.failure = onFailure;

          //define the showDialog function
          var showDialog = function() {
          
            //define the transaction success and failure handlers
            var responseSuccess = function(o) {
              
              //remove existing rating
              var mydialog = YAHOO.util.Dom.get("dialog");
              var fchild = YAHOO.util.Dom.getFirstChild(mydialog);
              var nsib = YAHOO.util.Dom.getNextSibling(fchild);
              var lsib = YAHOO.util.Dom.getLastChild(nsib);
              if (lsib.className != "") {
                lsib.parentNode.removeChild(lsib);
              }
              
              //create the new rating
              var p = document.createElement("p");
              YAHOO.util.Dom.addClass(p, "result");
              var rating = document.createTextNode(o.responseText);
              p.appendChild(rating);
              dialog.appendToBody(p);
            }
            var responseFailure = function(o) {
              alert(o.status);
            }
            
            //define the transaction callback object
            var callback = {
              success:responseSuccess,
              failure:responseFailure
            }
            //initiate the transaction
            var trans = YAHOO.util.Connect.asyncRequest("POST", "getratings.php", callback, "image=" + target);
            dialog.form.image.value = target;

            //show the dialog
            YAHOO.util.Dom.setStyle("dialog", "display", "block");
            dialog.show();
          }
          
          //execute showDialog when the appropriate context menuitem is clicked
          YAHOO.util.Event.addListener("yui-gen14", "click", showDialog);
        }
        //execute the initDialog function when the DOM is ready
        YAHOO.util.Event.onDOMReady(YAHOO.yuibook.menu.initDialog);
        
        //define the initSimpleDialog function
        YAHOO.yuibook.menu.initSimpleDialog = function() {
        
          //handle the ok button click
          var handleOk = function() {
            if (target == "img1"){
              imageInfo1.hide();
            } else {
              imageInfo2.hide();
            }
          }
          
          //define the SimpleDialog objects
          var imageInfo1 = new YAHOO.widget.SimpleDialog("sdialog1", {
            width:"250px",
            fixedcenter:true,
            modal:true,
            visible:false,
            icon: YAHOO.widget.SimpleDialog.ICON_INFO,
            buttons:[{text:"Ok", handler:handleOk}]
          });

          var imageInfo2 = new YAHOO.widget.SimpleDialog("sdialog2", {
            width:"250px",
            fixedcenter:true,
            modal:true,
            visible:false,
            icon: YAHOO.widget.SimpleDialog.ICON_INFO,
            buttons:[{text:"Ok", handler:handleOk}]
          });
          
          //set the content of the SimpleDialogs
          imageInfo1.setHeader("Information for Image 1");
          imageInfo1.setBody("<br>Image Title: Cloud Burst<br>Artist:  The Extremist<br>Creation date:  2006<br>&copy; Copyrighted?  Yes");
          imageInfo2.setHeader("Information for Image 2");
          imageInfo2.setBody("<br>Image Title: Righteous Breeze<br>Artist:  The Extremist<br>Creation date:  2007<br>&copy; Copyrighted?  Yes");
          
          //render the SimpleDialogs
          imageInfo1.render(document.body);
          imageInfo2.render(document.body);

          //show the SimpleDialog
          var showSimpleDialog = function() {
            if (target == "img1"){
              imageInfo1.show();
            } else {
              imageInfo2.show();
            }
          }
          //call showSDialog when the appropriate context menuitem is selected
          YAHOO.util.Event.addListener("yui-gen13", "click", showSimpleDialog);
        }
        
        //execute initSimpleDialog when DOMis ready
        YAHOO.util.Event.onDOMReady(YAHOO.yuibook.menu.initSimpleDialog);
        
        //define the initTooltip function
        YAHOO.yuibook.menu.initTooltip = function() {
        
          //define the Tooltip object
          var toolt = new YAHOO.widget.Tooltip("imgTip", {
            context:images,
            text:"Right-click for options (Opera users will need to use the Ctrl key + left-click)",
            hideDelay:"300",
            effect: {effect: YAHOO.widget.ContainerEffect.SLIDE, duration: 0.5}
          });
        }
        
        //execute initTooltip when the DOMis ready
        YAHOO.util.Event.onDOMReady(YAHOO.yuibook.menu.initTooltip);
      }
      
      //execute the initPage function when the DOM is ready
      YAHOO.util.Event.onDOMReady(YAHOO.yuibook.menu.initPage);
    </script>
  </body>
</html>



